<template>
  <view v-if="shenheStatus == 0" class="shop-card">
    <!-- 当前未兑换 -->
    <view class="">
      <!-- <view class="title"> 未兑换商品 </view> -->
      <view
        @click="$utils.toUrl('/goods/goods/goods?id=' + item.id)"
        class="item flex-x-sb"
        v-for="item in cardData"
        :key="item.id"
      >
        <image :src="item.cover_pic" mode="aspectFill"></image>
        <view class="right">
          <view class="info-title text-more-2">
            {{ item.name }}
          </view>
          <!-- <view class="flex-x-sb guige">
            <view class="text-more-2">
              <span v-for="(str, index) in item.attr_group_list" :key="index">
                <span>{{ str.attr_list[0].attr_name }}</span>
                <span
                  v-show="index < item.attr_group_list.length - 1"
                  style="margin: 0 10rpx"
                  >|</span
                >
              </span>
            </view>
            <view>X1</view>
          </view> -->
          <view class="flex-y-center flex-x-sb">
            <view class="price">¥{{ item.price }}</view>
            <!-- <view class="right-bt flex-y-center flex-x-center">兑换商品</view> -->
          </view>
        </view>
      </view>
    </view>
    <!-- 当前已兑换 -->

    <!-- 一件兑换 -->
    <view
      v-if="cardDetail.status == 0"
      class="bottom-button flex-y-center flex-x-sb"
    >
      <!-- <view style="font-size: 36rpx">
        ￥<span style="font-size: 60rpx">{{ totalPriceTo }}.</span
        ><span>{{ totalPriceEnd }}</span>
      </view> -->
      <view @click="submit">{{ $t('user.submit_new') }}</view>
    </view>

    <view
      v-if="cardDetail.status == 1"
      class="bottom-button flex-y-center flex-x-sb"
    >
      <!-- <view style="font-size: 36rpx">
        ￥<span style="font-size: 60rpx">{{ totalPriceTo }}.</span
        ><span>{{ totalPriceEnd }}</span>
      </view> -->
      <view style="background-color: rgba(240, 37, 14, 0.3)">已兑换</view>
    </view>
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from '@/components/shenhe/shenhe';
export default {
  components: { Shenhe },
  data() {
    return {
      card_id: 0,
      cardData: [],
      cardDetail: {},
    };
  },
  computed: {
    totalPriceTo() {
      if (!this.cardData) return '';
      var price = 0;
      this.cardData.forEach(item => {
        price += item.price - 0;
      });
      return parseInt(price);
    },
    totalPriceEnd() {
      if (!this.cardData) return '';
      var price = 0;
      this.cardData.forEach(item => {
        price += item.price - 0;
      });
      price = price * 100 + '';
      return price.slice(price.length - 2);
    },
    goodsList() {},
  },
  methods: {
    // 获取数据详情
    async getDetail() {
      try {
        const res = await this.$allrequest.coupon.verifyExchangeDetail(
          {
            sale_id: this.card_id,
          },
          true
        );
        this.cardData = res.data.list;
        this.cardDetail = res.data.verifyCardSale;
      } catch (error) {
        this.$utils.toast(error.msg || error);
      }
    },
    // 兑换提交
    async submit() {
      // 循环商品
      var goods_list = this.cardData.map(item => {
        // 循环规格表
        let attr = item.attr_group_list.map(attr_item => {
          return attr_item.attr_list[0];
        });

        let good = {
          goods_id: item.id,
          num: 1,
          attr: attr,
        };
        return good;
      });
      var params = [
        {
          mch_id: 0,
          goods_list,
        },
      ];

      this.$utils.toUrl(
        '/order/order-submit/order-submit?submit=' +
          JSON.stringify(params) +
          '&verify_card_id=' +
          this.cardDetail.id
      );
     
    },
  },
  onLoad(params) {
    this.card_id = params?.id;
    this.getDetail();
  },
};
</script>
<style>
	page {
		min-height: 100vh;
		background: #f2f2f2;
	}
</style>
<style lang="scss" scoped>
.shop-card {
  padding-bottom: calc(env(safe-area-inset-bottom) + 100rpx);
  > view {
		background: #fff;
		padding: 0 24rpx;
    .title {
      margin-top: 30rpx;
      line-height: 40rpx;
      font-size: 28rpx;
      font-weight: 600;
    }
    .item {
      padding: 24rpx 0;
      border-bottom: 1px solid #F8F8F8;
      > image {
        width: 160rpx;
        height: 160rpx;
        background: #f2f2f2;
        opacity: 1;
        border-radius: 10rpx;
        margin-right: 20rpx;
      }
      .right {
        flex: 1;
        width: 0;

        .info-title {
          font-size: 28rpx;
          line-height: 34rpx;
					font-weight: 400;
					margin-bottom: 12rpx;
					color: #262626;
        }
        .guige {
          margin-top: 10rpx;
          font-size: 24rpx;
          line-height: 34rpx;
          height: 68rpx;
          color: #8c8c8c;
          > .text-more-2 {
            flex: 1;
            margin-right: 100rpx;
          }
        }
        .price {
          line-height: 34rpx;
					color: #F0250E;
          font-size: 32rpx;
          font-weight: 600;
        }
        .right-bt {
          width: 152rpx;
          height: 60rpx;
          border: 2rpx solid #f60313;
          border-radius: 120rpx;

          font-size: 26rpx;
          color: #f0250e;
        }
      }
    }
  }
  > view:nth-child(2) {
    .item {
      view {
        color: #bfbfbf !important;
      }
    }
  }
  .bottom-button {
    position: fixed;
    left: 0;
    bottom: 0;
    padding: 0 30rpx;
    width: 100%;
    height: calc(env(safe-area-inset-bottom) + 100rpx);
    padding-bottom: env(safe-area-inset-bottom);
    background: #fff;
    > view:nth-child(1) {
      width: 100%;
      line-height: 76rpx;
      text-align: center;
      background: #f0250e;
      border-radius: 120rpx;
      font-size: 26rpx;
      font-weight: bold;
      color: #ffffff;
    }
  }
}
</style>
